<template>
    <view class="confirm-dialog-overlay" v-if="visible" @click="handleOverlayClick">
        <view class="confirm-dialog" @click.stop>
            <view class="dialog-header">
                <text class="dialog-title">确认入款</text>
            </view>

            <view class="dialog-content">

                <view class="info-row">
                    <text class="info-label">入款金额</text>
                    <text class="info-value">{{ formatNumber(orderInfo.amount) }}</text>
                </view>
                <view class="info-row">
                    <text class="info-label">入款账号</text>
                    <text class="info-value">{{ orderInfo.bankCardNo }}</text>
                </view>
            </view>

            <view class="dialog-buttons">
                <view class="btn btn-cancel" @click="handleCancel">
                    <text class="btn-text">取消</text>
                </view>
                <view class="btn btn-confirm" @click="handleConfirm">
                    <text class="btn-text">确认</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'inConfirmDialog',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        orderInfo: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
        }
    },
    methods: {
        handleOverlayClick() {
            this.$emit('close')
        },
        handleCancel() {
            this.$emit('cancel')
        },
        handleConfirm() {
            this.$emit('confirm')
        },
        // 格式化数字，添加千分符
        formatNumber(num) {
            if (num === null || num === undefined || num === '') {
                return '0.00';
            }
            // 将数字转换为字符串
            const numStr = num.toString();
            // 如果包含小数点，分别处理整数和小数部分
            if (numStr.includes('.')) {
                const parts = numStr.split('.');
                // 为整数部分添加千分符
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                return parts.join('.');
            } else {
                // 纯整数，添加千分符
                return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            }
        }
    }
}
</script>

<style scoped lang="scss">
.confirm-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.confirm-dialog {
    width: 90%;
    max-width: 600rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.dialog-header {
    text-align: center;
    margin-bottom: 40rpx;
}

.dialog-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
}

.dialog-content {
    margin-bottom: 40rpx;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 28rpx;
    color: #666666;
}

.info-value {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
}

.info-value.price {
    color: #ff4757;
}

.info-value.amount {
    color: #2ed573;
}

.dialog-buttons {
    display: flex;
    gap: 20rpx;
}

.btn {
    flex: 1;
    height: 80rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cancel {
    background-color: #f5f5f5;
}

.btn-confirm {
    background-color: #333333;
}

.btn-text {
    font-size: 28rpx;
    font-weight: 500;
}

.btn-cancel .btn-text {
    color: #666666;
}

.btn-confirm .btn-text {
    color: #ffffff;
}
</style>